import React from 'react';
import Button from 'antd-mobile/lib/button';
import Toast from 'antd-mobile/lib/toast';
import classNames from 'classnames';
import localStorage from 'shared/utils/localStorage';
import Icon from 'shared/components/base/Icon';
import { addCartFetch, addWish, delWish } from 'shared/commonFetch';
import toFixed from 'shared/utils/toFixed';
import SelectSku from './SelectSku';

import './index.less';

export default class BuyProductDetail extends React.PureComponent {
  constructor(props){
    super(props)
    this.state = {
      open: props.showSelectSku || false
    }
    this.selectProNumber = 1;
  }

  hanldeOpenDrawer = () => {
    const { open } = this.state;
    this.setState({ open: !open });
  }

  addCare = () => {
    gloablMonitor(['商品详情页-关注', this.props.item.title]);
    const productId = this.props.item.product_id;
    if (productId) {
      addCartFetch(productId, this.selectProNumber, false)
    }
  }

  // selectAddress=(address) => {
  //   this.setState({ address, addressListShow: false })
  // }

  handleBuyProduct = () => {
    if (this.repertoryNotEnough) {
      return;
    }

    const { product_id, title } = this.props.item;
    gloablMonitor(['商品详情页-立即购买', title]);

    if (product_id) {
      const productinfo = `${product_id}-${this.selectProNumber}`;
      localStorage.set('productinfo', productinfo)
      localStorage.set('nowBuyProductId', product_id)
      __self.history.push('/OrderDetails/buyProduct')
    }
  }

  onChangeSelectProNumber = (num) => {
    this.selectProNumber = num;
  }

  hanldeaddWish = (product_id, type, title) => {
    gloablMonitor(['商品详情页-关注', title]);
    if (!type) {
      const promiseAddWish= addWish(product_id)
      promiseAddWish && promiseAddWish.then(() => {
        this.props.fetchProductInfo().then(() => {
          Toast.success('关注成功！', 1);
        })
      })
    } else {
      delWish(product_id).then(() => {
        this.props.fetchProductInfo().then(() => {
          Toast.success('取消关注成功！', 1);
        })
      })
    }
  }

  onSelectSku = (data) => {
    this.props.fetchProductInfo(data.product_id);
  }

  renderProductStatusInfo = () => {
    const { quantity, status } = this.props.item;

    if (+status === 0) {
      return <span className="repertory-status">(商品已下架)</span>
    }

    if (+quantity === 0 && +status === 1) {
      this.repertoryNotEnough = true;
      return <span className="repertory-status">(暂无库存)</span>
    }

    if (+quantity < 10 && +quantity > 0 && +status === 1) {
      return <span className="repertory-status">(库存紧张)</span>
    }

    if (+quantity > 10 && +quantity > 0 && +status === 1) {
      return <span className="repertory-status">(有库存)</span>
    }

  }

  render() {
    const { item } = this.props;
    const showPice = item.rawprice !== item.price;

    return (
      <div className="buy-product-detail">
        <div className="product-img">
          <img  src={item.image} alt="" />
        </div>
        <div className="product-container">
          <div className="product-content">
            <span className="product-content-title">
              {item.title}
              {
                this.renderProductStatusInfo()
              }
            </span>
            <span className="product-content-activity">{item.brief}</span>
            {
              showPice &&
              <div className="price-item">
                <span className="price-item-label">会 员 价</span>
                <span className="price-item-number">
                  <span>￥</span>
                  {item.price && (+item.price).toFixed(2) || '0.00'}
                </span>
              </div>
            }

            <div className="price-item rawprice">
              <div>
                <span className="price-item-label">建议零售价</span>
                <span className={classNames("price-item-rawprice-number ", {'is-line-through': showPice})}>
                  <span>￥</span>
                  {item.rawprice && (+item.rawprice).toFixed(2) || '0.00'}
                </span>
              </div>
              <div className="product-share">
                <span onClick={() => { this.hanldeaddWish(item.product_id, item.iswishlist, item.title) }}>
                  <Icon type={`icon icon-xin ${item.iswishlist ? 'wished' : ''}`} />
                  <span>关注</span>
                </span>
                {/* <span> 分享</span> */}
              </div>
            </div>
            {
              item.presentlist && !!item.presentlist.length &&
              <div className="present">
                <span className="present-label">赠品</span>
                <span className="present-content">
                  {
                    item.presentlist.map((item, index) => (
                      <div key={index}>{`${item.title}   x1`}</div>
                    ))
                  }
                </span>
              </div>
            }
          </div>
          <div className="product-select-version">
            <div className="select-content">
              <span className="product-label">已选</span>
              <span className="product-version">{item.sku}</span>
            </div>

            <span onClick={this.hanldeOpenDrawer}>更多规格</span>
          </div>
          <div className="customer-address">
            <span className="product-label" />
            <div>
              <span>从 <strong>上海</strong> 发货，除周日及法定节假日外，当天15:30前完成支付，当日发货</span>
              {/* <p ><strong>近期受快递处理能力影响，部分订单可能延迟发货或者延迟到货，敬请谅解</strong></p> */}
            </div>
          </div>
        </div>

        {
          +item.status !== 0 &&
          <div className='button-container'>
            <span
              className={classNames("button now-buy-button", {
                disabeld: this.repertoryNotEnough
              })}
              onClick={this.handleBuyProduct}
            >
              立即购买
            </span>
            <Button type="warning" className="button button-add-cart" onClick={this.addCare}>加入购物车</Button>
          </div>
        }
        {
          this.state.open &&
          <SelectSku
            item={item}
            hanldeOpenDrawer={this.hanldeOpenDrawer}
            selectProNumber={this.selectProNumber}
            onChangeSelectProNumber={this.onChangeSelectProNumber}
            handleBuyProduct={this.handleBuyProduct}
            onSelectSku={this.onSelectSku}
            addCare={this.addCare}
            repertoryNotEnough={this.repertoryNotEnough}
          />
        }

      </div>
    )
  }
}